<template>
    <div>
        <van-field label="名称" placeholder="请输入名称" v-model="form.name"/>
        <br>
        展示图片：
        <img :src="pic" width=200 height=150/>
        <van-image width=200 height=150 :src='pic'/>
        <br>
        图片上传
        <van-uploader :after-read="afterRead"/>
        <br>

        展示视频:
        <br><br>

        视频上传:<van-uploader :after-read="afterReadVedio" v-model="filelist" multiple :max-count="3" accept='.mp4'/>
        <br>

        <van-button @click="add">添加</van-button>

    </div>
</template>

<script>
    export default {
        data(){
            return{
                form:{},
                pic:'http://localhost:5000/static/upload/',
                filelist:[],
                videos:[]
            }
        },
        methods:{
            //图片上传 默认类型为1
            afterRead(file,type=1){
                //只要是上传文件就需要声明formdata
                let data=new FormData()
                //将文件封装到data里
                data.append('file',file.file)
                this.$axios.post('addpic',data).then(res=>{
                    //判断类型 type==2是视频
                    if(type==2){
                        //              路径
                        this.videos.push(res.data.pic)
                    }else{
                         //更新图片 图片地址                              图片名
                        this.pic='http://localhost:5000/static/upload/'+res.data.pic
                    }
                   
                })
            },
            afterReadVedio(){
                //遍历filelist
                for(var i=0;i<this.filelist.length;i++){
                    //每一个文件
                    this.afterRead(this.filelist['i'],2)
                }
            },
            add(){

            },
        },
        mounted(){},
    }
</script>

<style scoped>

</style>